<template>
  <div class="branchRoom">
    <h1>杭州分店</h1>
    <div>
      <room
        v-for="item in rooms"
        @purchase="buyRoom(item)"
        :key="item.roomId"
        :isUsed="item.isUsed"
        :roomPic="item.picture"
        :roomPrice="item.roomPrice"
        :roomType="item.roomTypeName"
      ></room>
    </div>
    <el-dialog
      style="height: 360px"
      title="亲爱的客户"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span style="color: orange; font-size: 20px">确认购买这间房吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="confirmBuy">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import room from "@/components/room.vue";
export default {
  components: {
    room,
  },
  data() {
    return {
      rooms: [],
      dialogVisible: false,
    };
  },
  mounted() {
    //加载房间信息
    this.$http.hangzhouApi
      .queryAll()
      .then((res) => {
        console.log(res);
        this.rooms = res.data.data;
      })
      .catch((err) => console.log(err));
  },
  methods: {
    //点击购买按钮
    buyRoom(room) {
      //console.log(id);
      this.dialogVisible = true;
      this.$store.commit("setBuyId", room.roomId);
      this.$store.commit("setRoomPrice", room.roomPrice);
      //console.log(this.$store.state.buyId);
    },
    //确认购买
    confirmBuy() {
      this.dialogVisible = false;
      this.pay();
    },
    //加载房间信息
    loadRooms() {
      //加载房间信息
      this.$http.hangzhouApi
        .queryAll()
        .then((res) => {
          console.log(res);
          this.rooms = res.data.data;
        })
        .catch((err) => console.log(err));
    },
    // 支付
    pay() {
      this.$prompt("输入金额", "亲爱的客户，动动发财的小手", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",

        // inputErrorMessage: "输入金额不正确",
      })
        .then((value) => {
          //console.log(value.value);
          let price = this.$store.state.roomPrice;
          if (value.value != price) {
            this.$message({
              type: "error",
              message: "输入金额不正确！",
            });
          } else {
            let params = { roomId: this.$store.state.buyId, isUsed: "是" };
            this.$http.hangzhouApi
              .modify(params)
              .then((res) => {
                //console.log(res);
                if (res.data.code == 200) {
                  this.$message({
                    type: "success",
                    message: "恭喜您，购买房间成功！",
                  });
                  this.dialogVisible = false;
                  // 无刷新局部改渲染状态
                  this.loadRooms();
                  // store存储的购买房间buyId置0
                  this.$store.commit("resetBuyId");
                  //console.log('store存储的购买房间buyId置0：',this.$store.state.buyId);
                }
              })
              .catch((err) => console.log(err));
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
};
</script>

<style lang="scss" >
.branchRoom {
  > div {
    display: flex;
    flex-wrap: wrap;
  }
  > h1 {
    text-align: center;
    color: #409eff;
    font-size: 35px;
    margin-bottom: 30px;
  }
}
.el-dialog__title {
  color: #409eff;
  font-size: 27px;
  font-weight: bold;
}

.el-message-box {
  > .el-message-box__header {
    > .el-message-box__title {
      color: #409eff;
      font-weight: bold;
      font-size: 23px;
    }
  }
}

.el-message-box__content {
  color: lightcoral;
  font-weight: bold;
  font-size: 20px;
}
.el-button.el-button--default.el-button--small:nth-child(1) {
  background: #67c23a;
  color: white;
  font-weight: 500;
  font-size: 13px;
  border-radius: 4px;
  padding: 10px 15px;
}
</style>